
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuce"></i>
                    <div class="name">注册</div>
                    <div class="fontclass">.icon-zhuce</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaohuimima"></i>
                    <div class="name">找回密码</div>
                    <div class="fontclass">.icon-zhaohuimima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">登录 用户</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhucechenggong"></i>
                    <div class="name">注册成功</div>
                    <div class="fontclass">.icon-zhucechenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanzhu1"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-guanzhu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cc-card"></i>
                    <div class="name">cc-card</div>
                    <div class="fontclass">.icon-cc-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cc-card-o"></i>
                    <div class="name">cc-card-o</div>
                    <div class="fontclass">.icon-cc-card-o</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-plus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie"></i>
                    <div class="name">性别</div>
                    <div class="fontclass">.icon-xingbie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi3"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaohuimima1"></i>
                    <div class="name">找回密码</div>
                    <div class="fontclass">.icon-zhaohuimima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jushoucang"></i>
                    <div class="name">聚收藏</div>
                    <div class="fontclass">.icon-jushoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-lianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saoyisao"></i>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">.icon-saoyisao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengyin"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.icon-shengyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouhuodizhi"></i>
                    <div class="name">收货地址</div>
                    <div class="fontclass">.icon-shouhuodizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suo"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-suo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tishi"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.icon-tishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodefankui"></i>
                    <div class="name">我的反馈</div>
                    <div class="fontclass">.icon-wodefankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodehongbao"></i>
                    <div class="name">我的红包</div>
                    <div class="fontclass">.icon-wodehongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaoxiangji"></i>
                    <div class="name">照相机</div>
                    <div class="fontclass">.icon-zhaoxiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxizhongxin"></i>
                    <div class="name">消息中心</div>
                    <div class="fontclass">.icon-xiaoxizhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card"></i>
                    <div class="name">card</div>
                    <div class="fontclass">.icon-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-i-card"></i>
                    <div class="name">card</div>
                    <div class="fontclass">.icon-i-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi1"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xitongcaidan"></i>
                    <div class="name">系统菜单</div>
                    <div class="fontclass">.icon-xitongcaidan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xitongfanhui"></i>
                    <div class="name">系统返回</div>
                    <div class="fontclass">.icon-xitongfanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zonghe"></i>
                    <div class="name">综合</div>
                    <div class="fontclass">.icon-zonghe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinglun"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouqi"></i>
                    <div class="name">收起</div>
                    <div class="fontclass">.icon-shouqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiala"></i>
                    <div class="name">下拉</div>
                    <div class="fontclass">.icon-xiala</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiayibu"></i>
                    <div class="name">下一步</div>
                    <div class="fontclass">.icon-xiayibu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui1"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiyezigexinxipiliangchaxun"></i>
                    <div class="name">职业资格信息批量查询</div>
                    <div class="fontclass">.icon-zhiyezigexinxipiliangchaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanzhu2"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-guanzhu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuce1"></i>
                    <div class="name">注册</div>
                    <div class="fontclass">.icon-zhuce1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengluyemianmima"></i>
                    <div class="name">登录页面-密码</div>
                    <div class="fontclass">.icon-dengluyemianmima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-3902qia"></i>
                    <div class="name">card-b</div>
                    <div class="fontclass">.icon-3902qia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_mobile"></i>
                    <div class="name">手机号码图标</div>
                    <div class="fontclass">.icon-icon_mobile</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingyue"></i>
                    <div class="name">订阅</div>
                    <div class="fontclass">.icon-dingyue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujihaoma"></i>
                    <div class="name">手机号码</div>
                    <div class="fontclass">.icon-shoujihaoma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuce2"></i>
                    <div class="name">注册</div>
                    <div class="fontclass">.icon-zhuce2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card1"></i>
                    <div class="name">card</div>
                    <div class="fontclass">.icon-card1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card2"></i>
                    <div class="name">card</div>
                    <div class="fontclass">.icon-card2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhizuobiaozhun023108"></i>
                    <div class="name">订阅</div>
                    <div class="fontclass">.icon-iconfontzhizuobiaozhun023108</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbienv"></i>
                    <div class="name">性别女</div>
                    <div class="fontclass">.icon-xingbienv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbienan"></i>
                    <div class="name">性别男</div>
                    <div class="fontclass">.icon-xingbienan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yaoqingma"></i>
                    <div class="name">邀请码</div>
                    <div class="fontclass">.icon-yaoqingma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-13"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-13</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-setting-preferences-gear-office-application-structure-define-process-fbaaebdf"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-setting-preferences-gear-office-application-structure-define-process-fbaaebdf</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_booked"></i>
                    <div class="name">订阅</div>
                    <div class="fontclass">.icon-icon_booked</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima1"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang1"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanzhu3"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-guanzhu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenfenzheng"></i>
                    <div class="name">身份证</div>
                    <div class="fontclass">.icon-shenfenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanping"></i>
                    <div class="name">全屏</div>
                    <div class="fontclass">.icon-quanping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie-nan"></i>
                    <div class="name">性别-男</div>
                    <div class="fontclass">.icon-xingbie-nan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie-nv"></i>
                    <div class="name">性别-女</div>
                    <div class="fontclass">.icon-xingbie-nv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanzhu4"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-guanzhu4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingyue1"></i>
                    <div class="name">订阅</div>
                    <div class="fontclass">.icon-dingyue1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjia"></i>
                    <div class="name">评价</div>
                    <div class="fontclass">.icon-pingjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiandao"></i>
                    <div class="name">签到</div>
                    <div class="fontclass">.icon-qiandao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingyue2"></i>
                    <div class="name">订阅</div>
                    <div class="fontclass">.icon-dingyue2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi4"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujihao"></i>
                    <div class="name">手机号</div>
                    <div class="fontclass">.icon-shoujihao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiyeshengyamubiao"></i>
                    <div class="name">职业生涯目标</div>
                    <div class="fontclass">.icon-zhiyeshengyamubiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang2"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengluyonghuming"></i>
                    <div class="name">登录用户名</div>
                    <div class="fontclass">.icon-dengluyonghuming</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renshizhiye"></i>
                    <div class="name">认识职业</div>
                    <div class="fontclass">.icon-renshizhiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card_fill"></i>
                    <div class="name">card_fill</div>
                    <div class="fontclass">.icon-card_fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiye"></i>
                    <div class="name">职业</div>
                    <div class="fontclass">.icon-zhiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie1"></i>
                    <div class="name">性别</div>
                    <div class="fontclass">.icon-xingbie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohangdizhi"></i>
                    <div class="name">导航地址</div>
                    <div class="fontclass">.icon-daohangdizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang-"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zengjiaxinjian"></i>
                    <div class="name">增加、新建</div>
                    <div class="fontclass">.icon-zengjiaxinjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaxun"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.icon-chaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuxiao"></i>
                    <div class="name">注销</div>
                    <div class="fontclass">.icon-zhuxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi2"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin1"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaishi"></i>
                    <div class="name">开始</div>
                    <div class="fontclass">.icon-kaishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangyiye"></i>
                    <div class="name">上一页</div>
                    <div class="fontclass">.icon-shangyiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiayiye"></i>
                    <div class="name">下一页</div>
                    <div class="fontclass">.icon-xiayiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuye"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-zhuye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanzhu"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-guanzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiesuo"></i>
                    <div class="name">解锁</div>
                    <div class="fontclass">.icon-jiesuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongbu"></i>
                    <div class="name">同步</div>
                    <div class="fontclass">.icon-tongbu</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
